import React, { useEffect, useRef, useState } from 'react'
import { withRouter } from "react-router-dom"
import Top from '../../../components/top'
import "./index.css"
import "../../../icon/iconfont.css"
import { Popup, Cell, Flex } from 'react-vant'
function Exchange() {
    const [visible, setVisible] = useState(false)
    const inputt = useRef(null)
    const buttonn = useRef(null)
    useEffect(() => {

    }, [])

    return (
        <div className='Exchange_box'>
            <div className='Exchange_top'>
                <Top title="兑换中心"></Top>
            </div>
            <div className='Exchange_alert_border_img'>
                <img src="/img/home/兑换中心.png" alt="" />
                <div className='Exchange_alert_border_box'>
                    <div className='Exchange_alert_border'>

                    </div>

                </div>
            </div>
            <div className='Exchange_alert_box'>

                <div className='Exchange_alert'>

                    <div className='Exchange_alert_hui'>
                        <input type="text" placeholder='请输入兑换码' maxLength='8' ref={inputt} onChange={() => {
                            if (inputt.current.value.length === 8) {
                                buttonn.current.className = 'btn_active'
                            } else {
                                buttonn.current.className = 'Exchange_alert_button'
                            }
                        }} />

                        <Cell title={<span className='iconfont icon'>&#xe8b5;</span>} isLink onClick={() => setVisible(true)} />
                        <Popup visible={visible} onClose={() => setVisible(false)}>
                            <div style={{ padding: '',width:'300px',height:"260px", display:"flex",flexDirection:"column",alignItems:"center",marginTop:"10px"}}>
                                <img src="./img/home/信封.png" alt="" style={{width:"100px",marginTop:"10px"}} />
                                <h4 style={{fontSize:"20px",marginTop:"10px"}}>温馨提示</h4>
                                <p style={{fontSize:"14px",marginTop:"10px"}}>请完整清晰拍下来，系统自动为您</p>
                                <p style={{fontSize:"14px",marginTop:"10px"}}>识别兑换码</p>
                                <button style={{fontSize:"18px",marginTop:"10px",width:"200px",height:"40px",border:"none",background:"#d70028",borderRadius:"20px",color:"#ffffff"}}>拍照识别</button>
                            </div>
                        </Popup>
                    </div>
                    <div className="Exchange_alert_button" ref={buttonn}

                        onClick={() => {
                            if (buttonn.current.className === 'btn_active') {
                                console.log(inputt.current.value.length);
                                console.log(buttonn.current.className);
                            }


                        }}
                    >
                        立即兑换
                    </div>
                </div>

            </div>


        </div>
    )
}
export default withRouter(Exchange)

